<div class="drawigns-container">
  <div class="model-head">
    <div class="head-left">
      <a [routerLink]="['/outer/project-type']" class="breadcrumb">
        项目
      </a>
      <i nz-icon type="right" theme="outline"></i>
      <a (click)="routeToSurvey()" class="breadcrumb">
        {{projectName}}
      </a>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        二维图纸
      </b>
    </div>
    <div class="head-right">
      <button nz-button nzType="primary" *ngIf="status.PIpageAuthorty.PIDrawings" (click)="addDrawings()">上传图纸</button>
      <nz-input-group nzSearch [nzSuffix]="suffixButton" style="width: 340px;margin-left: 25px;">
        <input type="text" nz-input placeholder="请输入关键字" [(ngModel)]="findJson.filter">
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" (click)="search()" nzSearch>搜索</button>
      </ng-template>
    </div>
  </div>
  <div class="model-body">
    <div class="body">
      <div class="content-head">
        <div nz-row nzType="flex" nzJustify="space-between">
          <div nz-col nzSpan="2" style="padding-left: 30px">序号</div>
          <div nz-col nzSpan="3">图纸名称</div>
          <div nz-col nzSpan="3">图纸描述</div>
          <div nz-col nzSpan="3">上传人</div>
          <div nz-col nzSpan="3">文件大小</div>
          <div nz-col nzSpan="3">上传时间</div>
          <div nz-col nzSpan="2">操作</div>
        </div>
      </div>
      <div class="content-list">
        <div nz-row nzType="flex" nzJustify="space-between" *ngFor='let item of drawingsLists;let i = index'
          class="list" style="border-bottom: 1px solid #e5e5e5">
          <div nz-col nzSpan="2" style="padding-left: 30px">{{i + 1}}</div>
          <div nz-col nzSpan="3" class="openDrawings hidden-row" [title]="item.fileName" (click)="openDrawings(item)">
            {{item.fileName}}</div>
            <!-- {{item.path | extension}} -->
          <div nz-col nzSpan="3">{{item.name}}</div>
          <div nz-col nzSpan="3">{{item.creatorUserName}}</div>
          <div nz-col nzSpan="3">{{item.size|size}}M</div>
          <div nz-col nzSpan="3">{{item.creationTime|dateTimePipe}}</div>
          <div nz-col nzSpan="2">
            <!-- 2019.6.25 去掉修改 -->
            <!-- <i nz-icon type="form" theme="outline" class="icon-form" *ngIf="status.PIpageAuthorty.PIDrawings"
              (click)="editDrawings(item)"></i>
            <nz-divider nzType="vertical"></nz-divider> -->
            <i nz-icon type="delete" theme="outline" class="icon-delete" *ngIf="status.PIpageAuthorty.PIDrawings"
              (click)="deleteDrawings(item)"></i>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <nz-pagination [nzPageSize]="findJson.maxResultCount" [nzPageIndex]="nzPageIndex" [nzTotal]="nzTotal"
        (nzPageIndexChange)="pageChange($event)" nzShowQuickJumper [nzShowTotal]="totalTemplate"></nz-pagination>
      <ng-template #totalTemplate let-total>
        共{{nzTotal}}条
      </ng-template>
    </div>
  </div>
</div>

<!-- 添加 -->
<nz-modal [(nzVisible)]="isAddVisible" [nzTitle]="modalAddTitle" [nzContent]="modalAddContent"
  [nzFooter]="modalAddFooter" (nzOnCancel)="handleCancel()" [nzStyle]="{ top: '300px' }">
  <ng-template #modalAddTitle>
    添加图纸
  </ng-template>

  <ng-template #modalAddContent>


    <!-- 图纸描述 -->
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        描述
      </div>
      <div nz-col nzSpan=20>
        <input maxlength="100" nz-input placeholder="图纸描述" autofocus [(ngModel)]="addDrawingsModel.name" style="width: 300px;">
      </div>
    </div>
    <!-- 图纸上传 -->
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        文件
      </div>
      <div nz-col nzSpan=20 class="modal-left">
        <a *ngIf="!imgShow" (click)="upload.click()">{{addDrawingsModel.fileName}}</a>
        <button nz-button (click)="upload.click()" *ngIf="imgShow">上传文件</button>
        <span style="color: red;margin-left: 5px">*</span>
        <input type="file" class="input-file" (change)="fileChange($event)" [accept]='imgType' #upload>
        <nag-file-uploader style="display: none;" [autoUpload]="true" [flowFiles]="fileQueue" [multiple]="false"
          (onSuccess)="fileSuccess($event)" [fileHost]="FILEURL" #imageUploader>
        </nag-file-uploader>
      </div>
    </div>


    <!-- 2019.6.17 取消图纸模型关联 -->
    <!-- <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        选择模型
      </div>
      <div nz-col nzSpan=20>
        <nz-select style="width: 300px;" [(ngModel)]="addDrawingsModel.modelId" nzPlaceHolder="模型名称">
          <nz-option [nzValue]="list.id" [nzLabel]="list.name" *ngFor='let list of modelLists'></nz-option>
        </nz-select>
        <span style="color: red;margin-left: 5px">*</span>
      </div>
    </div> -->


  </ng-template>

  <ng-template #modalAddFooter>
    <button nz-button nzType="primary" (click)="handleAddOk()" [nzLoading]="addLoading">提交</button>
  </ng-template>
</nz-modal>

<!-- 修改 -->
<!-- <nz-modal [(nzVisible)]="isEditVisible" [nzTitle]="modalEditTitle" [nzContent]="modalEditContent"
  [nzFooter]="modalEditFooter" (nzOnCancel)="handleCancel()" [nzStyle]="{ top: '300px' }">
  <ng-template #modalEditTitle>
    修改图纸
  </ng-template>

  <ng-template #modalEditContent>
    <div nz-row class="modal">
      <div nz-col nzSpan=4 class="modal-left">
        图纸名称
      </div>
      <div nz-col nzSpan=20>
        <input nz-input placeholder="图纸名称" [(ngModel)]="editDrawingsModel.name">
      </div>
    </div>
  </ng-template>

  <ng-template #modalEditFooter>
    <button nz-button nzType="primary" (click)="handleEditOk()">提交</button>
  </ng-template>
</nz-modal> -->